import React from 'react';
import { UsersIcon, MessageCircleIcon, CalendarIcon, BookOpenIcon, ChevronRightIcon } from 'lucide-react';
export const CubClubPage = () => {
  const benefits = [{
    icon: <UsersIcon size={24} className="text-terracotta" />,
    title: 'Parent Community',
    description: 'Connect with other parents at similar stages of their parenting journey.'
  }, {
    icon: <MessageCircleIcon size={24} className="text-terracotta" />,
    title: 'Expert Q&A',
    description: 'Get answers to your questions from pediatricians, sleep consultants, and more.'
  }, {
    icon: <CalendarIcon size={24} className="text-terracotta" />,
    title: 'Virtual Events',
    description: 'Attend exclusive workshops, classes, and social gatherings online.'
  }, {
    icon: <BookOpenIcon size={24} className="text-terracotta" />,
    title: 'Resource Library',
    description: 'Access premium guides, checklists, and developmental resources.'
  }];
  const testimonials = [{
    quote: 'Joining Cub Club was the best decision I made as a new mom. The community support and expert advice have been invaluable.',
    author: 'Sarah T., mom of 2',
    image: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=120&q=80'
  }, {
    quote: 'The virtual events and expert Q&As have helped us navigate so many challenges during our first year of parenthood.',
    author: 'Michael K., dad of 1',
    image: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=120&q=80'
  }, {
    quote: "I love how Cub Club connects me with other parents in my area. We've formed real friendships beyond the digital space.",
    author: 'Emma L., mom of 3',
    image: 'https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=120&q=80'
  }];
  const upcomingEvents = [{
    date: 'June 15',
    time: '8:00 PM ET',
    title: 'Sleep Training Workshop',
    host: 'Dr. Melissa Chen, Pediatric Sleep Specialist',
    spots: 'Limited spots available'
  }, {
    date: 'June 22',
    time: '1:00 PM ET',
    title: 'Introducing Solid Foods',
    host: 'Amanda Wright, Pediatric Nutritionist',
    spots: 'Registration open'
  }, {
    date: 'June 30',
    time: '7:00 PM ET',
    title: 'Positive Discipline Techniques',
    host: 'Dr. James Thompson, Child Psychologist',
    spots: 'Registration open'
  }];
  return <div className="w-full">
      {/* Hero Section */}
      <div className="bg-cream py-16">
        <div className="container mx-auto px-4 md:px-6">
          <div className="flex flex-col md:flex-row items-center">
            <div className="md:w-1/2 mb-8 md:mb-0 md:pr-12">
              <h1 className="font-nunito font-bold text-3xl md:text-4xl lg:text-5xl text-dark mb-4">
                Join the Cub Club Community
              </h1>
              <p className="font-inter text-gray-600 text-lg mb-8">
                Connect with other parents, access expert advice, and get
                exclusive resources to support your parenting journey.
              </p>
              <div className="flex flex-col sm:flex-row gap-4">
                <a href="#join" className="bg-terracotta text-white px-6 py-3 rounded-md hover:bg-terracotta/90 transition-colors text-center font-medium">
                  Join Cub Club
                </a>
                <a href="#learn-more" className="bg-white text-dark px-6 py-3 rounded-md border border-gray-200 hover:bg-gray-50 transition-colors text-center font-medium">
                  Learn More
                </a>
              </div>
            </div>
            <div className="md:w-1/2">
              <img src="https://images.unsplash.com/photo-1491013516836-7db643ee125a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Parents and children in community setting" className="rounded-lg shadow-md" />
            </div>
          </div>
        </div>
      </div>
      {/* Benefits Section */}
      <div className="py-16 bg-white">
        <div className="container mx-auto px-4 md:px-6">
          <div className="text-center mb-12">
            <h2 className="font-nunito font-semibold text-2xl md:text-3xl text-dark mb-4">
              Membership Benefits
            </h2>
            <p className="font-inter text-gray-600 max-w-2xl mx-auto">
              Your Cub Club membership gives you access to a supportive
              community and valuable resources.
            </p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            {benefits.map((benefit, index) => <div key={index} className="bg-cream p-6 rounded-lg">
                <div className="mb-4 h-12 w-12 rounded-full bg-cream flex items-center justify-center">
                  {benefit.icon}
                </div>
                <h3 className="font-nunito font-semibold text-xl mb-2">
                  {benefit.title}
                </h3>
                <p className="text-gray-600">{benefit.description}</p>
              </div>)}
          </div>
        </div>
      </div>
      {/* Testimonials Section */}
      <div className="py-16 bg-cream">
        <div className="container mx-auto px-4 md:px-6">
          <div className="text-center mb-12">
            <h2 className="font-nunito font-semibold text-2xl md:text-3xl text-dark mb-4">
              What Our Members Say
            </h2>
            <p className="font-inter text-gray-600 max-w-2xl mx-auto">
              Hear from parents who have found support, friendship, and valuable
              resources through Cub Club.
            </p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {testimonials.map((testimonial, index) => <div key={index} className="bg-white p-6 rounded-lg shadow-sm">
                <div className="mb-4">
                  <svg className="h-8 w-8 text-terracotta/30" fill="currentColor" viewBox="0 0 32 32">
                    <path d="M9.352 4C4.456 7.456 1 13.12 1 19.36c0 5.088 3.072 8.064 6.624 8.064 3.36 0 5.856-2.688 5.856-5.856 0-3.168-2.208-5.472-5.088-5.472-.576 0-1.344.096-1.536.192.48-3.264 3.552-7.104 6.624-9.024L9.352 4zm16.512 0c-4.8 3.456-8.256 9.12-8.256 15.36 0 5.088 3.072 8.064 6.624 8.064 3.264 0 5.856-2.688 5.856-5.856 0-3.168-2.304-5.472-5.184-5.472-.576 0-1.248.096-1.44.192.48-3.264 3.456-7.104 6.528-9.024L25.864 4z" />
                  </svg>
                </div>
                <p className="text-gray-600 italic mb-6">{testimonial.quote}</p>
                <div className="flex items-center">
                  <img src={testimonial.image} alt={testimonial.author} className="h-10 w-10 rounded-full mr-3 object-cover" />
                  <span className="font-medium">{testimonial.author}</span>
                </div>
              </div>)}
          </div>
        </div>
      </div>
      {/* Upcoming Events */}
      <div className="py-16 bg-white">
        <div className="container mx-auto px-4 md:px-6">
          <div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-8">
            <div>
              <h2 className="font-nunito font-semibold text-2xl md:text-3xl text-dark mb-2">
                Upcoming Events
              </h2>
              <p className="font-inter text-gray-600">
                Join our virtual events led by parenting experts and
                professionals.
              </p>
            </div>
            <a href="/cub-club/events" className="mt-4 md:mt-0 text-terracotta hover:text-terracotta/80 flex items-center font-medium">
              View all events
              <ChevronRightIcon size={16} className="ml-1" />
            </a>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {upcomingEvents.map((event, index) => <div key={index} className="border border-gray-200 rounded-lg overflow-hidden bg-white">
                <div className="p-6">
                  <div className="flex items-center justify-between mb-4">
                    <div className="bg-cream px-3 py-1.5 rounded-md">
                      <span className="font-medium text-dark">
                        {event.date}
                      </span>
                    </div>
                    <span className="text-sm text-gray-500">{event.time}</span>
                  </div>
                  <h3 className="font-nunito font-semibold text-xl mb-2">
                    {event.title}
                  </h3>
                  <p className="text-gray-600 text-sm mb-4">
                    Hosted by: {event.host}
                  </p>
                  <div className="flex items-center justify-between">
                    <span className="text-xs text-gray-500">{event.spots}</span>
                    <a href={`/cub-club/events/${index}`} className="text-terracotta hover:text-terracotta/80 text-sm font-medium">
                      Register →
                    </a>
                  </div>
                </div>
              </div>)}
          </div>
        </div>
      </div>
      {/* Membership Options */}
      <div id="join" className="py-16 bg-cream">
        <div className="container mx-auto px-4 md:px-6">
          <div className="text-center mb-12">
            <h2 className="font-nunito font-semibold text-2xl md:text-3xl text-dark mb-4">
              Join Cub Club Today
            </h2>
            <p className="font-inter text-gray-600 max-w-2xl mx-auto">
              Choose the membership option that works best for your family.
            </p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
            <div className="bg-white rounded-lg shadow-sm overflow-hidden border border-gray-200 flex flex-col">
              <div className="p-6 flex-grow">
                <h3 className="font-nunito font-semibold text-xl mb-2">
                  Monthly
                </h3>
                <div className="mb-4">
                  <span className="text-3xl font-bold">$9.99</span>
                  <span className="text-gray-500">/month</span>
                </div>
                <ul className="space-y-3 mb-6">
                  <li className="flex items-center">
                    <svg className="h-5 w-5 text-green-500 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
                    </svg>
                    <span>Community access</span>
                  </li>
                  <li className="flex items-center">
                    <svg className="h-5 w-5 text-green-500 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
                    </svg>
                    <span>Expert Q&A sessions</span>
                  </li>
                  <li className="flex items-center">
                    <svg className="h-5 w-5 text-green-500 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
                    </svg>
                    <span>Basic resource library</span>
                  </li>
                </ul>
              </div>
              <div className="p-6 pt-0">
                <a href="/cub-club/join/monthly" className="block w-full py-2 bg-terracotta text-white rounded-md hover:bg-terracotta/90 transition-colors text-center font-medium">
                  Join Now
                </a>
              </div>
            </div>
            <div className="bg-white rounded-lg shadow-md overflow-hidden border-2 border-terracotta relative flex flex-col">
              <div className="absolute top-0 right-0 left-0 bg-terracotta text-white text-xs font-bold py-1 text-center">
                MOST POPULAR
              </div>
              <div className="p-6 pt-10 flex-grow">
                <h3 className="font-nunito font-semibold text-xl mb-2">
                  Annual
                </h3>
                <div className="mb-4">
                  <span className="text-3xl font-bold">$99.99</span>
                  <span className="text-gray-500">/year</span>
                </div>
                <p className="text-sm text-terracotta mb-4">
                  Save $19.89 compared to monthly
                </p>
                <ul className="space-y-3 mb-6">
                  <li className="flex items-center">
                    <svg className="h-5 w-5 text-green-500 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
                    </svg>
                    <span>Community access</span>
                  </li>
                  <li className="flex items-center">
                    <svg className="h-5 w-5 text-green-500 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
                    </svg>
                    <span>Expert Q&A sessions</span>
                  </li>
                  <li className="flex items-center">
                    <svg className="h-5 w-5 text-green-500 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
                    </svg>
                    <span>Full resource library</span>
                  </li>
                  <li className="flex items-center">
                    <svg className="h-5 w-5 text-green-500 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
                    </svg>
                    <span>Priority event registration</span>
                  </li>
                </ul>
              </div>
              <div className="p-6 pt-0">
                <a href="/cub-club/join/annual" className="block w-full py-2 bg-terracotta text-white rounded-md hover:bg-terracotta/90 transition-colors text-center font-medium">
                  Join Now
                </a>
              </div>
            </div>
            <div className="bg-white rounded-lg shadow-sm overflow-hidden border border-gray-200 flex flex-col">
              <div className="p-6 flex-grow">
                <h3 className="font-nunito font-semibold text-xl mb-2">
                  Family
                </h3>
                <div className="mb-4">
                  <span className="text-3xl font-bold">$149.99</span>
                  <span className="text-gray-500">/year</span>
                </div>
                <ul className="space-y-3 mb-6">
                  <li className="flex items-center">
                    <svg className="h-5 w-5 text-green-500 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
                    </svg>
                    <span>Up to 4 family members</span>
                  </li>
                  <li className="flex items-center">
                    <svg className="h-5 w-5 text-green-500 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
                    </svg>
                    <span>All annual benefits</span>
                  </li>
                  <li className="flex items-center">
                    <svg className="h-5 w-5 text-green-500 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
                    </svg>
                    <span>1:1 expert consultation</span>
                  </li>
                  <li className="flex items-center">
                    <svg className="h-5 w-5 text-green-500 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
                    </svg>
                    <span>Exclusive family events</span>
                  </li>
                </ul>
              </div>
              <div className="p-6 pt-0">
                <a href="/cub-club/join/family" className="block w-full py-2 bg-terracotta text-white rounded-md hover:bg-terracotta/90 transition-colors text-center font-medium">
                  Join Now
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>;
};